<!DOCTYPE html>
<html>
<head>
    <title>MarkDown</title>
    <meta charset="utf-8">
    <script src="js/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="js/showdown.min.js"></script>
    <link href="css/hybrid.min.css" rel="stylesheet">
    <link href="css/table-style.css" rel="stylesheet">
    <script src="js/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
        font-size: 16px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
    }

    #editor{
        margin: 0 auto;
        clear: both;
    }
    #e_head{
        border:1px gray solid;
        height: 30px;
        background-color: #777777;
        width: 100%;

    }


    #preview ,#e_content {
        float: left;
        display: inline-block;
    }
    #editor_vertical_wall{
        box-sizing: border-box;
        float: left;
        background-color: beige;
    }
    #preview {
        box-sizing: border-box;
        overflow:auto;
        border: 1px solid gray;
    }

    #editor_body {
        width: 100%;
    }

    #e_textarea {
        box-sizing: border-box;
        border:1px gray solid;
        padding:0 0px;
        font-size: 16px;
        letter-spacing: 1px;
        resize: none;
        background-color: #f6f6f6;
    }

    /*引用样式*/
    blockquote {
        border-left: 4px solid #dddddd;
        padding: 0 15px;
        color: #777777;
    }

    /*code代码高亮*/

    code, tt {
        margin: 0 2px;
        padding: 0 5px;
        /*注释掉 避免pre.code显示为单行*/
        /*white-space: nowrap;*/
        border: 1px solid #eaeaea;
        background-color: #f8f8f8;
        border-radius: 3px;
    }


</style>
<body>
<div id="editor">
    <div id="e_head">editor_head</div>
    <div id="editor_body">

        <div id="e_content">
            <textarea id="e_textarea" style="width: 50px" onkeyup="compile()" placeholder="在这里编写内容"></textarea>
        </div>
        <div id="editor_vertical_wall"></div>
        <div id="preview"></div>

    </div>

</div>



<script type="text/javascript">
    var formatPreCode = function(){
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }
    var formatDivCode = function(){
        hljs.configure({useBR: true});

        $('div.code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }
    function compile(){
        var text = $("#e_textarea").val();
        var converter = new showdown.Converter();
        showdown.setOption("tables",true)
        var html = converter.makeHtml(text);
        $("#preview").html(html);
        formatPreCode();
//        formatDivCode();
    }

    //textArea支持tab
    $("textarea").on('keydown',function(e){
        if(e.keyCode == 9){
            e.preventDefault();
            var indent = '    ';
            var start = this.selectionStart;
            var end = this.selectionEnd;
            var selected = window.getSelection().toString();
            selected = indent + selected.replace(/\n/g,'\n'+indent);
            this.value = this.value.substring(0,start) + selected + this.value.substring(end);
            this.setSelectionRange(start+indent.length,start+selected.length);
        }
    })
</script>
</body>
<script>
    var initMethod = function initSize(){
        $("#editor_body").height(window.innerHeight-100);
        var editorBodyHeight = $("#editor_body").height();
        var editorBodyWidth = $("#editor_body").width();
        var editorWidth = editorBodyWidth/2-15;
        var verticalWallWidth = 15;
//        body宽度-隔离墙宽度-编辑text宽度-边框总宽度-preview宽度
        var previewWidth = editorBodyWidth - verticalWallWidth - editorWidth-4;
        $("#e_textarea").height(editorBodyHeight);
        $("#e_textarea").width(editorWidth);
        $("#editor_vertical_wall").height(editorBodyHeight);
        $("#editor_vertical_wall").width(verticalWallWidth);
        $("#preview").height(editorBodyHeight);
        $("#preview").width(previewWidth);

    }
    initMethod();

    $(window).resize( function(){
        initMethod();
    });
</script>
</html>